namespace Element
Description
A collection of shortcut methods that are added to all DOM elements.
Methods
Class methods
-
cumulativeOffset #
Element.cumulativeOffset(@element) -> Element.Offset
Returns the offsets of
element
from the top left corner of the document.This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.
-
cumulativeScrollOffset #
Element.cumulativeScrollOffset(@element) -> Element.Offset
Calculates the cumulative scroll offset of an element in nested scrolling containers.
This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.
-
effect #
Element.effect(@element, effect[, options]) -> element
Initialize and play the specified effect on the element.
This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.
-
getLayout #
Element.getLayout(@element) -> Element.Layout
Returns an instance of
Element.Layout
for measuring an element's dimensions.Note that this method returns a new
Element.Layout
object each time it's called. If you want to take advantage of measurement caching, retain a reference to oneElement.Layout
object, rather than callingElement.getLayout
whenever you need a measurement. You should callElement.getLayout
again only when the values in an existingElement.Layout
object have become outdated.This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.
-
getStyles #
Element.getStyles(@element) -> Object
-
element
(String
|Object
) – DOM object or element ID
Returns an object with all currently applied style attributes for a given DOM object. This includes all styles from stylesheets, properties set with style attributes and CSS properties set with the DOM API.
This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.
-
-
measure #
Element.measure(@element, property) -> Number
Gives the pixel value of
element
's dimension specified byproperty
.Useful for one-off measurements of elements. If you find yourself calling this method frequently over short spans of code, you might want to call
Element.getLayout
and operate on theElement.Layout
object itself (thereby taking advantage of measurement caching).This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.
-
positionedOffset #
Element.positionedOffset(@element) -> Element.Offset
Returns
element
's offset relative to its closest positioned ancestor (the element that would be returned by Element.getOffsetParent).This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.
-
viewportOffset #
Element.viewportOffset(@element) -> Array
Returns the X/Y coordinates of element relative to the viewport.
This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.
Instance methods
-
appear #
Element#appear([, options]) -> element Element.appear(element[, options]) -> element
Make an element appear by fading it in from 0% opacity.
This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.
-
cloneWithoutIDs #
Element#cloneWithoutIDs() -> element Element.cloneWithoutIDs(element) -> element
Returns a clone of the element with all
id
attributed removed.This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.
-
fade #
Element#fade([, options]) -> element Element.fade(element[, options]) -> element
Fade out an element from its current opacity setting (or 100%).
This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.
-
morph #
Element#morph(style[, options]) -> element Element.morph(element, style[, options]) -> element
Dynamically adjust an element's CSS styles to the CSS properties given in the
style
argument.This method is the preferred way to invoke CSS-based effects:
$('element_id').morph('width:500px'); $('element_id').morph('width:500px', 'slow'); $('element_id').morph('width:500px', function(){ alert('finished!'); }); $('element_id').morph('width:500px', 2); // duration 2 seconds
$('element_id').morph('width:500px;height:500px', { duration: 4, transition: 'linear', delay: .5, propertyTransitions: { width: 'mirror', height: 'easeInOutCirc' }, after: function(){ alert('finished'); } });
// the height morph will be executed immediately following // the width morph $('element_id').morph('width:500px').morph('height:500px');
morph
will create a newS2.FX.Queue
for the element if there isn't on already, and use this queue for queueing up chained morphs. To prevent a morph from queuing at the end, use theposition: 'parallel'
option.// the height morph will be executed at the same time as the width morph $('element_id').morph('width:500px').morph('height:500px',{ position: 'parallel' });
S2.FX.Morph
.This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.
-
scrollTo #
Element#scrollTo([, to[, options]]) -> element Element.scrollTo(element[, to[, options]]) -> element
This method augments Prototype's Element.scrollTo method.
With just the
@element
parameter given, it will revert to Prototype's default implementation: the viewport will be scrolled (without animation) to contain the element.If given the
to
parameter, the elements contents will be smoothly scrolled to the specified scrollTop position.This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.
-
transform #
Element#transform(transforms) -> element Element.transform(element, transforms) -> element
-
transforms
(Object
) – rotation angle and scale factor
Rotate and scale an element.
transforms
is an object containing:rotation
: Rotation angle in radiansscale
: Scale factor
Example:
// rotate by 1.5 radians, scale by 200% $('element_id').transform({ rotation: 1.5, scale: 2 });
Element#transform
:$('element_id').observe('manipulate:update', function(event){ $('element_id').transform(event.memo); });
radians = degrees * (Math.PI/180);
This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.
-